<!DOCTYPE html>
<html>
	<head>
			<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
			<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
			<style type="text/css">
					body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
					#allmap{width:99%;height:99%;}
					
				</style>
				<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=ZdDvmajgCuN4lLrvdccyHXiEGGDAY1iV"></script>
				<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

			<title>获取手机定位</title>
	</head>

<body style="padding: 5px;">
		<!-- <label id="msg">获取区域</label> -->
			<div id="allmap"></div>
			<audio id="voice" src="sos.mp3"></audio>
			
</body>


<script type="text/javascript">



	var mypoint = new Array()
	// 注意：此处建议方法名首字母大写
	var j=0;
	
	   //    mypoint[j] = new Array(5);
	   //  　mypoint[j] = null;
	   //  　mypoint[j] = new Object;
		  // mypoint[j]['type'] = "21";
	   //  　mypoint[j]['lng'] = 121.676011;
	   //  　mypoint[j]['lat'] = 31.14622;
	   //  　mypoint[j]['id'] = "21";
	   //  　mypoint[j]['message'] = "123";
		  // mypoint[j]['pressure'] = 180;
	
	
	     var opts = {
					width : 250,     // 信息窗口宽度
					height: 80,     // 信息窗口高度
					title : "信息" , // 信息窗口标题
					enableMessage:true//设置允许信息窗发送短息
				   };
				   
	
	// 百度地图API功能
		var map = new BMap.Map("allmap");
		
		var zoom=18;//地图显示比例大小
	
		var point = new BMap.Point(121.4254333, 31.263980);
		map.centerAndZoom(point, zoom);
		map.disableDoubleClickZoom(true);
	
	 window.onload = function () {
		
				//方法内容
			//var websocket_url='ws://112.124.25.223:888/api/WSChat';
			var websocket_url='ws://112.124.25.223:1802/WebSocketXX';
			
			var websocket=new WebSocket(websocket_url);
			
			websocket.onopen=function (event) {
			console.log('connecte websocket success');
			};
			websocket.onmessage=function (event) {
			console.log('websocket server return message : '+event.data);
			var regex3 = /\{(.+?)\}/g; // {} 花括号，大括号
			var ss=event.data.match(regex3);
			
			//console.log(">>>>>>>>"+ss[0]);
				//var obj = eval('('+event.data+')'); //使用eval函数
				var obj = JSON.parse(ss[0]);

				//以最新的点为地图中心
				if( (obj.type=='1'||obj.type=='V'||obj.type=='2')&&obj.id!=""){
				       //删除没用的点
				         j=obj.id;
					     mypoint[j] = new Array(5);
					   　mypoint[j] = null;
					   　mypoint[j] = new Object;
					   //　mypoint[j]['type'] = obj.type;
					   　mypoint[j]['lng'] = obj.jd;
					   　mypoint[j]['lat'] = obj.wd;
					   　mypoint[j]['id'] = obj.id;
					   　mypoint[j]['message'] = "消息内容";
					     mypoint[j]['pressure'] = 180;
					   point = new BMap.Point(obj.jd, obj.wd);
					   map.centerAndZoom(point, zoom);
					   
					   //完全清除原先的点
					   map.clearOverlays();
						for (var k in mypoint) {
						var marker = new BMap.Marker(new BMap.Point(mypoint[k]['lng'],mypoint[k]['lat']));  // 创建标注
						var content = mypoint[k]['message'];
						map.addOverlay(marker);// 将标注添加到地图中
					


							//如果血压高标成红色，设置为跳动
							if(mypoint[k]['pressure']>180){
								var label = new BMap.Label("SOS:"+mypoint[k]['id'],{offset:new BMap.Size(20,-10)});
								label.setStyle({
											 color : "red",
											 border:"1px solid #fff0000",
										 });
							//	marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画	
								
							}else{
									//如果2，设置为跳动
							if(obj.type=='2'){
									//设置名称
								var label = new BMap.Label("SOS:"+mypoint[k]['id'],{offset:new BMap.Size(20,-10)});
								label.setStyle({
											 color : "red",
											 border:"1px solid #fff0000",
										 });
								marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画	
								
							}else{

									//设置名称
						        var label = new BMap.Label("用户："+mypoint[k]['id'],{offset:new BMap.Size(20,-10)});
								label.setStyle({
									color : "black",
									border:"1px solid black",
								 });
							}


							}
							 
									 
						marker.setLabel(label);
						
						//如果有消息就跳动
						if(mypoint[k]['message']!=''){
							
							addClickHandler(content,marker);
						}

					 


						   //openSelfInfo(content+event.data,mypoint[i]['lng'],mypoint[i]['lat']);
						}
					}
					// deletePoint(mypoint[i]['lng'],mypoint[i]['lat']);
			};
			
			websocket.onclose=function (event) {
			console.log('client close');
			//失败后重新链接
			var websocket=new WebSocket(websocket_url);
			};
			
			websocket.onerror=function (event,e) {
			console.log('error '+event.data);
			};
			
	        }
			function addClickHandler(content,marker){
					marker.addEventListener("click",function(e){
						openInfo(content,e)}
					);
				}
			function openInfo(content,e){
					var p = e.target;
					var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
					var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
					map.openInfoWindow(infoWindow,point); //开启信息窗口
			}
			
			function openSelfInfo(content,lng,lat){
					var point = new BMap.Point(lng, lat);
					var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
					map.openInfoWindow(infoWindow,point); //开启信息窗口
					
					setTimeout("map.closeInfoWindow()",5000);
					//自动关闭前一个
					//setTimeout(infoWindow.close(),5000);
							
			}
			
			function deletePoint(lng,lat){
				
					var allOverlay = map.getOverlays();
					for (var i = 0; i < allOverlay.length -1; i++){
						
					//if(allOverlay[i].toString()=="[objectMarker]"){						
						//if(allOverlay[i].getLabel().content == pointname){
							
						if (allOverlay[i].getPosition().lng == lng&&allOverlay[i].getPosition().lat == lat) {

						
							map1.removeOverlay(allOverlay[i]);
							
							return false;
						}
					 // }
					}
					
					
				}
			
</script>
</html>